import { httpPost } from "@utils/HttpUtil";
import { Button, Select, SelectProps, Tag } from "antd";
import { FC, useState } from "react";


type TagRender = SelectProps["tagRender"];
const knowledgeList = httpPost("/knowledge/getKnowledgeList", {}).data;
const tagList = knowledgeList.map((item:any)=>{
    return {
      value: item.title,
      label: item.title,
    };
})


const options: SelectProps["options"] = tagList;

const tagRender: TagRender = (props) => {
    const { label, closable, onClose } = props;
    const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
      event.preventDefault();
      event.stopPropagation();
    };
    var filterList = knowledgeList.filter((item:any)=>item.title === label);
    var item = filterList[0];
    if(item !== undefined){
        return (
          <Tag
            color={item.color}
            onMouseDown={onPreventMouseDown}
            closable={closable}
            onClose={onClose}
            style={{ marginInlineEnd: 6 }}
          >
            {item.title}
          </Tag>
        );
    }else{
      return <></>;
    }
};

const ToolbarFilter: FC<any> = ({filterData})=>{
    const [currentValue, setCurrentValue] = useState([]);

    const handleSelected = (value:any)=>{
      setCurrentValue(value);
    }

    const handleFilter = ()=>{
        var filterList = httpPost("/problemKnowledge/getProblemList", {
            andList: currentValue
        }).data;
        const itemData = filterList.map((problem: any) => ({
          href: "https://ant.design",
          title: problem.title,
          avatar: "https://api.dicebear.com/7.x/miniavs/svg?seed=1",
          description: "管理员",
          content: problem,
        }));
        filterData(itemData);
    }

    return (
      <>
        <Select
          mode="multiple"
          tagRender={tagRender}
          defaultValue={currentValue}
          style={{ width: "400px", marginTop: 20, marginBottom: 20 }}
          options={options}
          onChange={handleSelected}
        />
        <Button type="primary" style={{marginLeft: 20}} onClick={handleFilter}>筛选题目</Button>
      </>
    );

}

export default ToolbarFilter;